/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="ContentTitle">
    <div class="coordination-select">
      <div class="coordination-name">{{$t('openatc.greenwaveoptimize.coordinationstrategy')}}:</div>
      <div class="select-condition">
        <el-select v-model="optstrategy" :placeholder="$t('openatc.common.placeholder')" size="small" @change="onOptstrategyChange">
          <el-option
            v-for="item in optstrategyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="coordination-select">
      <div class="coordination-name" style="margin-left: 20PX;">{{$t('openatc.area.keyrouteid')}}:</div>
      <div class="select-condition">
        <el-select v-model="keyrouteid" filterable :placeholder="$t('openatc.common.placeholder')" size="small" @change="onKeyrouteidChange">
          <el-option
            v-for="item in routeData"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="coordination-select">
      <div class="coordination-name" style="margin-left: 20PX;">{{$t('openatc.area.areaIntersection')}}:</div>
      <div class="select-condition">
        <el-select v-model="keyintsid" filterable :placeholder="$t('openatc.common.placeholder')" size="small" @change="onKeyintsidChange">
          <el-option
            v-for="item in devList"
            :key="item.agentid"
            :label="item.name"
            :value="item.agentid">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="coordination-select">
      <div class="coordination-name" style="margin-left: 20PX;">{{$t('openatc.area.areaCycle')}}:</div>
      <div class="select-condition">
        <el-input
          size="small"
          v-model="cycle"
          :disabled="true">
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import AreaApi from '../../../api/area'
import { getTscControl } from '../../../api/control'
import Messagebox from '../../../components/MessageBox/index.vue'
import { getMessageByCode } from '../../../utils/responseMessage'
export default {
  name: 'ContentTitle',
  data () {
    return {
      areaId: 0,
      keyrouteid: '',
      keyintsid: '0',
      optstrategy: '',
      cycle: 0,
      devList: [],
      optstrategyOptions: [{
        value: 'static',
        label: this.$t('openatc.area.staticOptimize'),
        id: '1'
      }, {
        value: 'dynamic',
        label: this.$t('openatc.area.dynamicOptimize'),
        id: '2'
      }],
      maskVisible: false, // 引导遮罩层是否显示
      routeData: {}, // 单个协调路线的全部信息
      greenwave: []
    }
  },
  components: {
    Messagebox
  },
  props: {
    schemeData: {
      type: Array
    },
    step: {
      type: Boolean
    },
    zIndexObj: {
      type: Object
    },
    chooseId: {
      type: Number
    }
  },
  watch: {
    schemeData: {
      handler: function (val) {
        if (val && !val.length && this.step) {
          this.maskVisible = true
          // 模拟一次手动点击，触发tip显示
          this.$refs.editbtn.click()
        }
      },
      deep: true
    }
  },
  methods: {
    getTscControl (agentid) {
      let _this = this
      return new Promise((resolve, reject) => {
        getTscControl(agentid).then(data => {
          let pattern
          let res = data.data
          if (!res.success) {
            let parrenterror = getMessageByCode(data.data.code, _this.$i18n.locale)
            if (data.data.data) {
              // 子类型错误
              let childErrorCode = data.data.data.errorCode
              if (childErrorCode) {
                let childerror = getMessageByCode(data.data.data.errorCode, _this.$i18n.locale)
                _this.$message.error(parrenterror + ',' + childerror)
              }
            } else {
              _this.$message.error(parrenterror)
            }
            resolve(pattern)
          }
          pattern = res.data.data
          resolve(pattern)
        })
      })
    },
    updateAreaStrategy (data) {
      AreaApi.updateAreaStrategy(data).then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.$message({
          message: this.$t('openatc.common.updatesuccess'),
          type: 'success',
          duration: 1 * 1000,
          onClose: () => {
            // this.$emit('refresh')
          }
        })
      })
    },
    onOptstrategyChange () {
      this.doUpdate()
    },
    async onKeyrouteidChange () {
      if (this.keyintsid === '') {
        return false
      }
      let pattern = await this.getTscControl(this.keyintsid)
      this.cycle = pattern ? pattern.cycle : 0
      this.doUpdate()
    },
    async onKeyintsidChange () {
      if (this.keyintsid === '') {
        return false
      }
      let pattern = await this.getTscControl(this.keyintsid)
      this.cycle = pattern ? pattern.cycle : 0
      this.doUpdate()
    },
    doSynchronize (devList) {
      this.devList = devList
      if (this.keyintsid === '') {
        return false
      }
      let filterDev = this.devList.filter(item => item.agentid === this.keyintsid)
      if (!filterDev || filterDev.length === 0) {
        // 配置的路口已经被删除
        this.keyintsid = ''
        this.cycle = 0
        this.doUpdate()
      }
    },
    doUpdate () {
      let reqData = {
        id: this.areaId,
        optstrategy: this.optstrategy,
        keyintsid: this.keyintsid,
        keyrouteid: this.keyrouteid,
        cycle: this.cycle
      }
      this.updateAreaStrategy(reqData)
    },
    init (area, list) {
      this.areaId = area.id
      this.routeData = area.routes
      this.keyintsid = area.keyintsid
      this.keyrouteid = area.keyrouteid
      this.optstrategy = area.optstrategy
      this.cycle = area.cycle
      this.devList = list
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
</style>
